<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="stuff, to, help, search, engines, not" name="keywords">
    <meta content="What this page is about." name="description">
    <meta content="Display Webcam Stream" name="title">
    <title>Display Webcam Stream</title>

    <style>
        #container {
            margin: 0px auto;
            width: 500px;
            height: 375px;
            border: 10px #333 solid;
        }
        
        #videoElement {
            width: 500px;
            height: 375px;
            background-color: #666;
        }
    </style>
</head>

<body>
    <div id="container">
        <video autoplay="true" id="videoElement">

        </video>
    </div>
    <script>
        var video = document.querySelector("#videoElement"); 
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 
        if (navigator.getUserMedia) {          
            navigator.getUserMedia({
                video: true
            }, handleVideo, videoError);
        } 
        function handleVideo(stream) {    
            video.src = window.URL.createObjectURL(stream);
            console.log("success");
        } 
        function videoError(e) {     // do something

            console.log("Error");
        }
    </script>
</body>

</html>